<template>
  <div class="my-card">
    <profile-main-tabs v-model="active" class="flex-1" />
    <div>
      <user-activities v-show="active === 'activities'" :cur-tab="active" />
      <user-spaces v-show="active === 'spaces'" :cur-tab="active" />
      <user-docs v-show="active === 'docs'" :cur-tab="active" />
      <user-issues v-show="active === 'issues'" :cur-tab="active" />
      <user-answers v-show="active === 'answers'" :cur-tab="active" />
      <user-collections v-show="active === 'collections'" :cur-tab="active" />
      <user-following v-show="active === 'following'" :cur-tab="active" />
    </div>
  </div>
</template>

<script>
import ProfileMainTabs from '@/views/users/show/components/profile-main-tabs';
import UserActivities from '@/views/users/show/lists/activities-list';
import UserSpaces from '@/views/users/show/lists/spaces-list';
import UserDocs from '@/views/users/show/lists/docs-list';
import UserIssues from '@/views/users/show/lists/issues-list';
import UserAnswers from '@/views/users/show/lists/answers-list';
import UserFollowing from '@/views/users/show/lists/following-list';
import UserCollections from '@/views/users/show/lists/collections-list';

export default {
  name: 'profile-main-column',
  components: {
    ProfileMainTabs,
    UserActivities,
    UserSpaces,
    UserDocs,
    UserIssues,
    UserAnswers,
    UserFollowing,
    UserCollections,
  },
  data() {
    return {
      active: '',
    };
  },
};
</script>

<style></style>
